<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, Refresh, Plus, Edit, Delete, Document, Printer } from '@element-plus/icons-vue'
import QuotationTemplate from './components/QuotationTemplate.vue'

// 弹窗控制
const dialogVisible = ref(false)
const dialogTitle = ref('报价单预览')

// 控制页面内容显示
const showTemplate = ref(false)

// 打开报价单模板
const openQuotationTemplate = () => {
  showTemplate.value = true
}

// 返回列表
const backToList = () => {
  showTemplate.value = false
}
</script>

<template>
  <el-main class="pricing-main">
    <!-- 报价单列表页 -->
    <div v-if="!showTemplate" class="main-container">
      <el-card class="header-card" shadow="hover">
        <div class="page-header">
          <h2 class="page-title">报价单管理</h2>
          <div class="header-actions">
            <el-button type="primary" @click="openQuotationTemplate" :icon="Printer">
              生成报价单
            </el-button>
          </div>
        </div>
      </el-card>
      
      <el-card class="content-card" shadow="hover">
        <div class="empty-state">
          <el-empty description="暂无报价单数据">
            <el-button type="primary" @click="openQuotationTemplate">生成新报价单</el-button>
          </el-empty>
        </div>
      </el-card>
    </div>
    
    <!-- 报价单模板页 -->
    <div v-else class="template-container">
      <div class="template-header">
        <el-button @click="backToList" plain>返回列表</el-button>
      </div>
      <QuotationTemplate />
    </div>
  </el-main>
</template>

<style scoped lang="scss">
.pricing-main {
  padding: 0;
}

.main-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.header-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .page-title {
    margin: 0;
    font-size: 20px;
    color: #303133;
  }
}

.content-card {
  min-height: 500px;
  border-radius: 8px;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.template-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
  
  .template-header {
    margin-bottom: 20px;
  }
}
</style> 